<template lang="pug">
.view.cp-product-risk.fix-flex-pos
  //- 查询
  .risk-search
    el-form(:inline="true")
      el-form-item(label="产品 :")
        el-select.select-width(v-model="product", placeholder="请选择")
          el-option(
            v-for="(item, index) in productSelect",
            :key="index",
            :label="item.name",
            :value="item.value")
      el-form-item(label="状态 :")
        el-select.select-width(v-model="status", placeholder="请选择")
          el-option(
            v-for="(item, index) in statusSelect",
            :key="index",
            :label="item.name",
            :value="item.value")
      el-form-item(label="下分模块 :")
        el-select.select-width(v-model="module", placeholder="请选择")
          el-option(
            v-for="(item, index) in moduleSelect",
            :key="index",
            :label="item.name",
            :value="item.value")
      el-form-item
        el-input(
          v-model="proName",
          placeholder="ID/标题",
          style="width: 200px")
      el-form-item
        el-checkbox-group(v-model="action")
          el-checkbox-button(
            v-for="item in actionSelect",
            :label="item.value",
            :key="item.name") {{item.name}}
      el-form-item
        el-button(type="primary", plain, @click="search") 搜索
      el-form-item
        el-button(type="primary") 不良事件库
      el-form-item
        el-button(type="primary", @click="createTisk") 新建风险
      el-form-item
        el-button(type="primary", @click="batchTransfer") 批量转出至需求
      el-form-item
        el-button 导入
      el-form-item
        el-button 导出
      el-form-item
        el-button(type="primary" icon="el-icon-setting" circle @click="showColumn")
  //- 表格
  .risk-table
    el-table(
      :data="dataList",
      highlight-current-row,
      v-loading="loadingData",
      size="mini",
      height="100%")
      el-table-column(show-overflow-tooltip, type="index", label="序号")
      el-table-column(show-overflow-tooltip, v-for="col in columnList", :prop="col.prop", :label="col.label", :key="col.prop")
      el-table-column(label="操作")
        template(slot-scope="scope")
          el-tooltip(content="详情")
            i.icon-act.el-icon-view
          el-tooltip(content="编辑")
            i.icon-act.el-icon-edit
          el-tooltip(content="删除")
            i.icon-act.el-icon-delete
  //- 分页
  el-pagination.risk-pagination(
    background,
    layout="total, prev, pager, next, jumper",
    prev-text="上一页",
    next-text="下一页",
    @current-change="handleCurrentChange",
    :current-page="pageNum",
    :page-size="pageSize",
    :total="totalNum")
  column(
    :visible="columnVisible",
    :data="columnList",
    @submit="handleSelectCol",
    @close="columnVisible = false")
  RiskPopup(
    :title="rpTitle",
    :visible.sync="rpVisible",
    :is-edit="rpEdit",
    :parent-data="rpData",
    @submit="onPopupSubmit",
    @close="rpVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import ProductData from '@/data/product';
import Column from './column';
import RiskPopup from './riskPopup';

export default {
  name: 'prorisk',
  components: {
    Column,
    RiskPopup
  },
  data() {
    return {
      columnList: [],
      // 右边部分
      loadingData: true,
      dataList: [],
      pageNum: 1,
      pageSize: 16,
      totalNum: 0,
      // 搜索条件
      product: null,
      status: null,
      module: null,
      proName: null,
      action: [null],
      // 新建popup
      rpTitle: '新建风险',
      rpVisible: false,
      rpEdit: false,
      rpData: {},
      // 设置弹框
      columnVisible: false,
      // 搜索下拉框
      productSelect: [],
      statusSelect: [],
      moduleSelect: [],
      levelSelect: [],
      creatorSelect: [],
      actionSelect: [
        { name: '全部', value: null },
        { name: '由我评审', value: 1 },
        { name: '由我发布', value: 2 }
      ]
    };
  },
  computed: {
    ...mapGetters([])
  },
  created() {
    this.productSelect = ProductData.productSelect;
    this.statusSelect = ProductData.riskStatusSelect;
    this.moduleSelect = ProductData.moduleSelect;
    // 获取表格排列方式
    this.loadColumnList();
  },
  mounted() {
    this.loadDataList();
  },
  methods: {
    // 获取表格排列方式
    loadColumnList() {
      this.columnList = ProductData.columnList;
    },
    // 整理参数
    filterParams() {
      const params = {
        product: this.product,
        status: this.status,
        module: this.module,
        proName: this.proName,
        action: this.action
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key];
        }
      }
      return params;
    },
    // 取得表格数据
    loadDataList() {
      this.loadingData = true;
      // const params = this.filterParams();
      setTimeout(() => {
        this.dataList = ProductData.riskList;
        this.totalNum = 64;
        this.loadingData = false;
      }, 500);
    },
    // 搜索
    search() {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadDataList();
    },
    // 页码改变
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadDataList();
    },
    // 显示设置表头
    showColumn() {
      this.columnVisible = true;
    },
    // 监听选择
    handleSelectCol(data) {
      this.columnList = data;
      this.columnVisible = false;
    },
    // 新建
    createTisk() {
      this.rpTitle = '新建风险';
      this.rpVisible = true;
      this.rpEdit = true;
      this.rpData = {};
    },
    // popup提交
    onPopupSubmit() {

    },
    // 批量转出
    batchTransfer() {

    }
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
$SELECTWIDTH: 100px
$TREEWIDTH: 320px
$PADDINGWIDTH: 12px
.cp-product-risk
  .risk-search
    height: $SEARCHHEIGHT
    padding: 12px 0 12px 16px
    overflow-x: auto
    overflow-y: hidden
    .select-width
      width: $SELECTWIDTH
    .date-width
      width: 260px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      margin-left: 6px
      padding-right: 6px
    .el-date-editor .el-range__close-icon
      width: 20px
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label
      height: 32px
  .risk-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow-x: hidden
    overflow-y: auto
    &::before
      display: none
  .el-table
    th, td
      text-align: center
  .risk-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
  .icon-act
    font-size: 16px
    font-weight: 500
    cursor: pointer
    margin-left: 3px
    margin-right: 3px
    &:hover
      color: #5D9BFB
</style>
